<!--
 * @Author: TKH
 * @Date: 2021-06-07 15:44:23
 * @LastEditTime: 2021-06-10 16:01:08
 * @Description: 列表组件
 * @FilePath: \vant-v3\src\components\list_item.vue
-->
<template>
  <div>
    <div class="item" @click="handleToDetails" v-for="item in params.listData" :key="item.id" v-show="params.pathType === 'details'">
      <!-- 第一种方式，使用routerLink标签跳转 -->
      <!-- 第二种方式，使用点击事件触发跳转 -->
      <!-- <router-link class="list_item" to="/details"> -->
      <!-- </router-link> -->
        <van-image class="item-img" width="80" height="70" v-if="item.previewImg" :src="item.previewImg" />
        <div class="item-content" v-if="item.releaseDate && item.author">
          <span class="item-title" style="height: 50px;">{{ item.title }}</span>
          <div class="item-source">
            <span>发布时间：{{ item.releaseDate }}</span>
            <span>来源：{{ item.author }}</span>
          </div>
        </div>
    </div>
    <div class="item" @click="handleToDetails" v-for="item in params.listData" :key="item.id" v-show="params.pathType !== 'details'">
      <van-image class="item-img" width="60" radius="30" height="60" round v-if="item.schoolBadge" :src="item.schoolBadge" />
      <div class="item-content">
        <span class="item-title school-name">{{ item.title }}</span>
        <div class="item-source">
          <span>专业数：{{ item.majorNum }}</span>
          <span>{{ item.lever }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
export default {
  /**
   * @params: Props组件传值 
   * pathType: 跳转页面类型(1: 跳转资讯文章详情页, 2: 跳转院校专业详情页)
   * listData: [{ 列表数据
   *   id: '', 详情id
   *   title: '', 标题
   *   releaseDate: '', 发布时间
   *   author: '', 文章来源/作者
   *   previewImg: '' 预览图片
   * }]
   */ 
  props: {
    params: Object
  },
  setup(props) {
    const router = useRouter();
    function handleToDetails() {
      let path = '';
      if (props.params.pathType === 'details') {
        path = '/details';
      } else {
        path = '/major';
      }
      router.push(path);
    };
    return {
      handleToDetails
    }
  }
}
</script>

<style scoped>
.school-name {
  font-size: 20px !important;
  line-height: 40px !important;
  font-weight: 600;
}
</style>
